<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑步</title>
    <!-- 重置样式表 -->
    <link rel="stylesheet" href="../libs/commCss/normalize.css">
    <!-- 补充重置样式 -->
    <link rel="stylesheet" href="../libs/commCss/reset.css">
    <!-- 公共属性样式表 -->
    <link rel="stylesheet" href="../libs/commCss/property.css">
    <!-- 公共样式表 -->
    <link rel="stylesheet" href="../libs/commCss/basic.css">
    <!-- 字体图标样式 -->
    <link rel="stylesheet" href="../fonts/font_fitness/iconfont.css">
    <!-- 当前页面样式表 -->
    <link rel="stylesheet" href="../css/running.css">
</head>

<body>
    <div class="app-running dpflex fdcolumn">
        <!-- 顶部选项卡菜单 -->
        <div class="running-menu">
            <div class="menu-box  dpflex">
                <p class="menu-active">跑步</p>
                <p>骑行</p>
                <p>课程训练</p>
            </div>

        </div>

        <!-- 选项卡内容盒子 -->
        <div class="running-content flex1">
            <!-- 跑步距离 -->
            <div class="running-distance"></div>
            <!-- 地图区域 -->
            <div class="running-map"></div>
            <!-- 跑步路线区域 -->
            <div class="running-area"></div>
        </div>

        <!-- 底部 -->
        <div class="modular-bottom">
            <ul class="bottom-list dpflex">
                <li class="iconfont icon-shouye flex1 dpflex fdcolumn">
                    <p class="">首页</p>
                </li>
                <li class="active iconfont icon-xintiao flex1 dpflex fdcolumn">
                    <p class="active">运动</p>
                </li>
                <li class="special iconfont icon-quanzi fdcolumn flex1 dpflex">
                    <p>圈子</p>
                </li>
                <li class="iconfont icon-wode flex1 fdcolumn dpflex">
                    <p>我的</p>
                </li>
            </ul>
        </div>
    </div>


</body>

</html>